<template>
	
	<view>
		
		<u-sticky bgColor="#fff">
		   <u-tabs 
					:list="list" 
					@change="change"
					active-color="#FD7885"
					height='88'
					bar-width='58'
					bar-height='4'
					item-width='375'
					style="border-bottom: 1px solid #EDEDED;border-top: 1px solid #EDEDED;"
					font-size='26'
					:current='current'
					:is-scroll="false"
					></u-tabs>
		 </u-sticky>
		 

	
	<view class="course_list_container">
		
		<view class="item" v-for="(item, index) in orderList" :key='index'>
			<view class="pic_title align-center">
				<view class="title_box">
					<view class="title_pic_box" style="padding-bottom: 29rpx;">
						<view class="pro_title_img">
							<image :src='item.productTitleImg' mode="aspectFill"></image>
						</view>
						<view @click="goNav('/me/spreader/orders/info?ordersId='+item.ordersId)" style="flex: 1;">
							<view class="name">{{item.productTitle}}</view>
							<view class="label pad_17"><text>订单号：</text>{{item.ordersNo}}</view>
							<view class="label pad_17"><text>下单时间：</text>{{item.createTime}}</view>
							
							<view style="display: flex;justify-content: space-between">
								<view class="label" v-if='item.ordersType==1'><text>订单种类：</text>短剧</view>
								<view class="label" v-else-if='item.ordersType==2'><text>订单种类：</text>会员</view>
								<view class="label" v-else-if='item.ordersType==3'><text>订单种类：</text>充值</view>
								<view class="label" v-else-if='item.ordersType==100'><text>订单种类：</text>推广订单</view>
								<view class="label" v-else-if='item.ordersType==101'><text>订单种类：</text>推广任务订单</view>
								<view style="font-weight: bold;
font-size: 24rpx;
color: #FD7885;">¥{{item.payMoney}}</view>
							</view>
							
						</view>
					</view>
					<u-line dashed></u-line>
					<view class="item-btom " v-if="item.questState == 0">
						<view @click="cancelOrder(item.ordersId)">
							<view class="item-btom-btn">取消</view>
						</view>
						<!-- <view @click="payClick(item)">
							<view class="item-btom-btn pay">支付</view>
						</view> -->
					</view>
					<view class="item-btom" v-if="item.questState == 1">
						<!-- <view @click="cancelClick(item)">
							<view class="item-btom-btn">取消</view>
						</view> -->
						<view @click.stop="goNav('/me/spreader/orders/info?ordersId='+item.ordersId)">
							<view class="item-btom-btn pay">提交结果</view>
						</view>
					</view>
					<view class="item-btom" v-if="item.questState == 2">
					</view>
				</view>
			</view>

		</view>

		<u-loadmore v-if="orderList.length > 0" :status="status" />
		<empty title="暂无资源" :isShow='false' v-if="orderList.length==0"></empty>
	</view>
</view>

</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				orderList: [],
				status: 'loadmore',
				page: 1,
				limit: 5,
				thisOrderInfo: null,
				orderList2: [],
				// 0 待支付 1 进行中 2 任务已做完 3 确认完成 4 异常 100 已取消
				list: [{
					name: '待支付'
				}, {
					name: '进行中'
				}, {
					name: '待确认',
					count: 0
				}, {
					name: '已完成',
					count: 0
				}, {
					name: '已取消',
					count: 0
				}],
				current: 0
			}
		},
		onLoad() {
			this.getorderList()
		},
		onShow() {
			this.getorderList()
		},

		methods: {
			change(index) {
				this.orderList = []
				this.current = index;
				this.getorderList();
			},
			getorderList() {
				let data = {
					limit: this.limit,
					page: this.page,
					status: this.current
				}
				if (this.current === 4) {
					data.status = 100
				}
				this.$u.get("/app/spreader/getSpreaderOrderPage", data).then(
					res => {
						if (res.code === 0) {
							this.pages = res.data.pages
							if (this.page < this.pages) {
								this.status = 'loadmore'
							} else {
								this.status = 'nomore'
							}
							if (this.page == 1) {
								this.orderList = res.data.records
							} else {
								this.orderList = [...this.orderList, ...res.data.records]
							}
						} else {
							uni.stopPullDownRefresh();
						}
					});
			},
			cancelOrder(orderId) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '是否确认取消此订单',
					success: function(res) {
						if (res.confirm) {
							that.$u.get("/app/spreader/cancelOrderByUser?orderId=" + orderId).then(
								res => {
									if (res.code === 0) {
										that.status = 'loading'
										that.getorderList()
									}
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			goNav(e) {
				uni.navigateTo({
					url: e
				})
			},
		},
		onReachBottom: function() {
			console.log('onReachBottom>>>>>>>')
			if (this.page < this.pages) {
				this.page += 1
				this.status = 'loading'
				this.getorderList()

			} else {
				this.status = 'nomore'
			}

		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getorderList()
		},

	}
</script>

<style scoped lang="scss">
	
	.title_pic_box{
		display: flex;
	}
	.pad_17{
		padding-bottom: 10rpx;
	}
	
	.pro_title_img{
		width: 160rpx;
		height: 160rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-right: 20rpx;
		image{
			width: 130rpx;
			height: 126rpx;
			
		}
	}
	.item-btom {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx 10upx;
		font-size: 28upx;
		width: 100%;

		.item-btom-btn {
			height: 54rpx;
			padding: 0 47rpx;
			border-radius: 54rpx;
			border: 1px solid #CCCCCC;
			align-items: center;
			font-weight: bold;
			font-size: 24rpx;
			color: #333333;
			display: flex;
			justify-content: center;
			margin-left: 20rpx;
		}

		.pay {
			background: linear-gradient(90deg, #FD7885, #FAA7AF);
			border: none;
			color: #ffffff;
		}
	}

	.course_list_container {
		padding: 10rpx;

		.this_ing_order {
			background: #f8d3d3;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.ing_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 10rpx;

				.label {
					font-weight: 400;
					font-size: 28rpx;
					color: #969696;
					width: 200rpx;
					flex-shrink: 0;
				}

				text {
					&:nth-child(2) {
						font-size: 28rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #000;
						text-align: right;
					}
				}

				.per_box {
					flex: 1;
					height: 20rpx;
					background: rgba(25, 190, 107, 0.2);
					margin-left: 10rpx;
					border-radius: 20rpx;
					overflow: hidden;
					margin-right: 10rpx;

					view {
						background: rgba(25, 190, 107, 1);
						height: 20rpx;
						border-radius: 20rpx;
					}
				}
			}
		}

		.item {
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 30rpx 20rpx 0 20rpx;
			margin-bottom: 20rpx;

			.pic_title {

				// image {
				// 	width: 160rpx;
				// 	height: 200rpx;
				// 	border-radius: 8rpx;
				// 	margin-right: 16rpx;
				// 	flex-shrink: 0;
				// }

				.name {
					display: block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-weight: bold;
					font-size: 28rpx;
					color: #1A1A1A;
					padding-bottom: 18rpx;
				}

				.label {
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					text {
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.type {
					border: 1px solid #8B8FF0;
					color: #8B8FF0;
					margin-right: 4rpx;
					padding-top: 6rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
				}

				.label_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #969696;
					// display:block;
					// white-space:nowrap;
					// overflow:hidden;
					// text-overflow:ellipsis;
					// width: 500rpx;
				}
			}

			.btn_box {
				display: flex;
				margin-top: 20rpx;
				justify-content: flex-end;

				button {
					margin: 0 !important;
					margin-left: 20rpx !important;
				}
			}
		}
	}
</style>